<script setup lang='ts'>
const props = defineProps({
    bookinfo: {
        type: Object,
    },
    index: {
        type: Number
    }
})
</script>

<template>
    <div class="hot" v-if="props.bookinfo">
        <img src="@/assets/imgs/icon_01.png" alt="" v-if="props.index == 0">
        <img src="@/assets/imgs/icon_02.png" alt="" v-if="props.index == 1">
        <img src="@/assets/imgs/icon_03.png" alt="" v-if="props.index == 2">
        <div class="content">

            <img v-lazy="props.bookinfo.cover + '?imageView&thumbnail=240y336'" alt="">
            <h5>{{ props.bookinfo.title }}</h5>
            <span v-if="props.bookinfo.clickCount > 0">{{ (Number(props.bookinfo.clickCount) / 10000
            ).toFixed(2) }}万点击</span>
        </div>
    </div>
</template>

<style lang="less" scoped>
.hot {
    width: 30%;
    position: relative;

    >img {
        width: 100%;
        position: absolute;
        top: -13rem;
        left: 0;
        z-index: 2;
    }

    .content {
        img {
            width: 100%;
            height: 145rem;
        }

        h5 {
            font-size: 14rem;
            margin: 5rem 0;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            text-overflow: ellipsis;
            overflow: hidden;
            -webkit-line-clamp: 2;
        }
    }
}
</style>
